<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main {
            margin: 20px auto;
            width: 400px;
            height: 600px;
            background-image: url("img/背景.jpg");
            position: relative;
            overflow: hidden;

        }
        #panel {
            font-size: 20px;
            font-weight: 800;
            color: white;
            margin: 10px;
            z-index: 99;
            position: relative;
        }
        #stopgame {
           position: relative;
            left: 340px;
            top: -80px;
            width: 60px;
            height: 60px;
            
        }
        #stopgame img {
            width: 60px;
            height: 60px;
            z-index: 9;
            position:absolute;
            cursor: pointer;
        }
        #cover {
            position:absolute;
            background-color: black;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            opacity: 0.5;
           
        }
        #contion img {
            position:absolute;
            z-index: 999;
            top: 200px;
            left: 100px;
            cursor: pointer;
            display: none;
            cursor: pointer;
        }
        #stgame img {
            position: absolute;
            z-index: 999;
            top:400px;
            left: 90px;
            cursor: pointer;
            
        }
        #congame img {
            position: absolute;
            z-index: 999;
            top:400px;
            left: 90px;
            cursor: pointer;
            display: none;
            
        }
        
        @keyframes move {
            0%{}
            100%{
                transform: translate(300px,0px);
            }
        }
        @keyframes back {
            0%{}
            100%{
                transform: translate(150px,0px);
            }
        }
        .size {
            width: 356px;
            height:340px;
        }
        .size1 {
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 背景 -->
    <div id="main">
        <div id="panel">
            杀敌数：<span class="sore">0</span>
        </div>
        <div id="panel">
            血量：<span class="blood">5</span>
        </div>
        <div id="stopgame">
            <img src="img/暂停.png">
        </div>
        <div id="cover">

        </div>
        <div id="contion">
            <img src="img/继续.png">
        </div>
        <div id="stgame">
            <img src="img/start.png">
        </div>
        <div id="congame">
            <img src="img/开始.png">
        </div>
    </div>
    <audio src="bg.mp3" autoplay="autopaly" id="startmusic" loop="loop"></audio>
    <audio src="bullet.mp3" id="shoot"></audio>
    <script>
        var startmusic=document.getElementById('startmusic');
        var shoot=document.getElementById("shoot");
         var cstgame=document.querySelector("#congame").querySelector('img');
        var cover=document.querySelector('#cover');
        var contion=document.querySelector('#contion').querySelector('img');
        var stopgame=document.querySelector('#stopgame').querySelector('img');
        var startgame=document.querySelector("#stgame").querySelector('img');
        var congame=document.querySelector("#congame").querySelector('img');
          startgame.onclick=function(){
            startgame.style.animation="move 3s forwards ease";
            cover.style.display="none";
            startmusic.play();
          stopgame.onclick=function(){
            cover.style.display="block";
            contion.style.display="block";
            clearInterval(Smalltimer);
            clearInterval(shoottime);
            clearInterval(movetime);
            clearInterval(creatime);
            congame.style.animation="back 0.4s  ease";
            congame.style.display="block";
            console.log(123);
            startmusic.pause();
            shoot.pause();
        }
        contion.onclick=function(){
            this.style.display="none";
            cstgame.style.display="none";
            cover.style.display="none";
            startmusic.play();
            shoot.play();
            Smalltimer=setInterval(Smallmove, 50);
            movetime= setInterval(CtrlPlay, 30);
            shoottime=setInterval(bulletMove, 10);
            creatime=setInterval(createPlane, 1000);

        }
        cstgame.onclick=function(){
            contion.style.display="none";
            cstgame.style.display="none";
            cover.style.display="none";
            startmusic.play();
            shoot.play();
            for(var i=0;i<SmallplaneArry.length;i++){
                mainObj.removeChild(SmallplaneArry[i].imgNode);
            }
            SmallplaneArry.splice(0,SmallplaneArry.length);
            for(var i=0;i<bulletArry.length;i++){
                mainObj.removeChild(bulletArry[i].imgNode);
            }
            bulletArry.splice(0,bulletArry.length);
            Smalltimer=setInterval(Smallmove, 50);
            movetime= setInterval(CtrlPlay, 30);
            shoottime=setInterval(bulletMove, 10);
            creatime=setInterval(createPlane, 1000);
            num.innerHTML=0;
        }
        var mainObj = document.querySelector('#main');
        var SmallplaneArry = [];//敌机
        var bulletArry = [];//子弹;
        // 控制飞机移动按钮
        var upbt = false;
        var downbt = false;
        var leftbt = false;
        var rightbt = false;
        var bull=false;
        var nums=0;
        var num=document.querySelector('.sore');
        
       
        // 创建敌方飞机
        /*
        属性：
            图片节点
            图片
            x坐标
            y坐标
            速度
            行为：
            移动
            初始化 把图片放在main中
        */
        function Smallplane(imgsrc, x, y, speed) {
            this.isDead = false;
            this.exTimer = 20;
            this.imgNode = document.createElement('img');
            this.imgsrc = imgsrc;
            this.x = x;
            this.y = y;
            this.speed = speed;
            this.init = function () {
                this.imgNode.src = this.imgsrc;
                this.imgNode.style.position = "absolute";
                this.imgNode.style.width = 50 + 'px';
                this.imgNode.style.height = 60 + 'px';
                this.imgNode.style.left = this.x + 'px';
                this.imgNode.style.top = this.y + 'px';
                mainObj.appendChild(this.imgNode);
            }
            this.move = function () {
                this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + 'px';
            }
            this.init();
        }
        //创建敌军
        function createPlane() {
            var planedome = new Smallplane("img/敌机2.png", parseInt(Math.random() * 366), -parseInt(Math.random() * 100 + 40), parseInt(Math.random() * 10) + 1);
            SmallplaneArry.push(planedome);
        }
       var creatime=setInterval(createPlane, 1000);
        function Smallmove() {
            for (var i = 0; i <= SmallplaneArry.length; i++) {
                if (SmallplaneArry[i].isDead==false) {
                    SmallplaneArry[i].move();
                    if (parseInt(SmallplaneArry[i].imgNode.style.top) >= 550) {
                        mainObj.removeChild(SmallplaneArry[i].imgNode);
                        SmallplaneArry.splice(i,1);
                    }
                } else {
                    SmallplaneArry[i].exTimer--;
                    if (SmallplaneArry[i].exTimer == 0) {
                        // mainObj.removeChild(SmallplaneArry[j].imgNode);
                        SmallplaneArry[i].imgNode.style.display="none";
                        SmallplaneArry.splice(j, 1);
                    }
                }
            }
        }
        

        var Smalltimer=setInterval(Smallmove, 50);
        // 创建玩家
        /*
        属性：
            图片节点
            图片
            x坐标
            y坐标
            速度
            行为：
            移动
            初始化 把图片放在main中
        */
        function Playplane(imgsrc, x, y, speed) {
            this.imgNode = document.createElement('img');
            this.imgsrc = imgsrc;
            this.x = x;
            this.y = y;
            this.speed = speed;
            this.playinit = function () {
                this.imgNode.src = imgsrc;
                this.imgNode.style.left = this.x + 'px';
                this.imgNode.style.top = this.y + 'px';
                this.imgNode.style.position = "absolute";
                this.imgNode.className="size1";
                mainObj.appendChild(this.imgNode);
            }
            this.playinit();
            //    玩家移动 上下左右
            this.moveleft = function () {
                //    控制边界
                if (this.imgNode.style.left == "-150px") {
                    this.imgNode.style.left = "400px";
                } else {
                    this.imgNode.style.left = parseInt(this.imgNode.style.left) - this.speed + 'px';
                }
            }
            this.moveright = function () {
                if (this.imgNode.style.left == "400px") {
                    this.imgNode.style.left = "-150px";
                } else {
                    this.imgNode.style.left = parseInt(this.imgNode.style.left) + this.speed + 'px';
                }
            }
            this.moveup = function () {
                if (this.imgNode.style.top == "0px") {
                    this.imgNode.style.top = "0px";
                } else {
                    this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed + 'px';
                }
            }
            this.movedown = function () {
                if (this.imgNode.style.top == "500px") {
                    this.imgNode.style.top = "500px";
                } else {
                    this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + 'px';
                }
            }
            //    发射
            this.shoot = function () {
                var newbullet = new bullet('img/子弹.png', parseInt(this.imgNode.style.left)+75, parseInt(this.imgNode.style.top)-30 , 5);
                bulletArry.push(newbullet);
                
            }

        }
        var play = new Playplane('img/玩家.png', 0,340, 10);
        document.body.onkeydown = function () {
            var e = window.event || arguments[0];

            //移动 wasd
            if (e.keyCode == 87) {
                upbt = true;
            }
            if (e.keyCode == 65) {
                leftbt = true;
            }
            if (e.keyCode == 83) {
                downbt = true;
            }
            if (e.keyCode == 68) {
                rightbt = true;
            }
            if (e.keyCode == 32) {
                bull=true;
               
               
            }
            
        }
        document.body.onkeyup = function () {
            var e = window.event || arguments[0];

            if (e.keyCode == 87) {
                upbt = false;
            }
            if (e.keyCode == 65) {
                leftbt = false;
            }
            if (e.keyCode == 83) {
                downbt = false;
            }
            if (e.keyCode == 68) {
                rightbt = false;
            }
            if (e.keyCode == 32) {
                bull = false;
            }
            
        }
        function CtrlPlay() {
            if (upbt == true) {
                play.moveup();
            }
            if (downbt == true) {
                play.movedown();
            }
            if (leftbt == true) {
                play.moveleft();
            }
            if (rightbt == true) {
                play.moveright();
            }
            if (bull == true) {
                play.shoot();
                shoot.play();
            }

        }
       var movetime= setInterval(CtrlPlay, 30);
        /*子弹
        属性：图片节点
            图片
            x坐标
            y坐标
            速度
        */
        function bullet(imgsrc, x, y, speed) {
            this.timer=3;
            this.imgNode = document.createElement('img');
            this.imgsrc = imgsrc;
            this.x = x;
            this.y = y;
            this.speed = speed;
            this.init = function () {
                this.imgNode.src = imgsrc;
                this.imgNode.style.left = this.x + 'px';
                this.imgNode.style.top = this.y + 'px';
                this.imgNode.style.width = 50+ 'px';
                this.imgNode.style.height = 50+ 'px';
                this.imgNode.style.position = "absolute";


                mainObj.appendChild(this.imgNode);
            }
            this.init();
            this.move = function () {
                this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed + 'px';
            }
        }
        function bulletMove() {
            for (var i = 0; i < bulletArry.length; i++) {
                bulletArry[i].move();
                if (parseInt(bulletArry[i].imgNode.style.top) < -10) {
                    mainObj.removeChild(bulletArry[i].imgNode);
                    bulletArry.splice(i, 1);
                }
            }
        }
        var shoottime=setInterval(bulletMove, 10);
        //碰撞函数
        function boom() {
            for (var i = 0; i < SmallplaneArry.length; i++) {
                for (var j = 0; j < bulletArry.length; j++) {
                    var btleft = parseInt(bulletArry[j].imgNode.style.left);
                    var bttop = parseInt(bulletArry[j].imgNode.style.top);
                    var plleft = parseInt(SmallplaneArry[i].imgNode.style.left);
                    var pltop = parseInt(SmallplaneArry[i].imgNode.style.top);
                    if (SmallplaneArry[i].isDead == false) {
                        if (btleft >= plleft - 50 && btleft <= plleft + 30 && bttop + 10 >= pltop && bttop <= pltop) {
                            // mainObj.removeChild(bulletArry[j].imgNode);
                            // bulletArry.splice(i,1);
                            mainObj.removeChild(bulletArry[j].imgNode);
                            bulletArry.splice(j, 1);
                            SmallplaneArry[i].imgNode.src = "img/爆炸.gif";
                            SmallplaneArry[i].isDead = true;
                            num.innerHTML=parseInt(num.innerHTML)+1;
                        }
                    }
                }
            }
        }
        setInterval(boom, 30);
    }
    </script>
</body>

</html>